<template>
    <div class="elemInfoDialog">
        <el-dialog v-model="dialogVisible" title="" :before-close="handleClose" align-center
            :close-on-click-modal="false" :close-on-press-escape="false">
            <div class="dialog_content">
                <div class="dialog_title">
                    <span>属性</span>
                </div>
                <div class="dialog_body">
                    <el-collapse v-model="activeNames" @change="handleChange">
                        <!-- <el-collapse-item title="Consistency" name="1">
                            <div>
                                Consistent with real life: in line with the process and logic of real
                                life, and comply with languages and habits that the users are used to;
                            </div>
                            <div>
                                Consistent within interface: all elements should be consistent, such
                                as: design style, icons and texts, position of elements, etc.
                            </div>
                        </el-collapse-item> -->
                        <el-collapse-item  :name="index+1" :title="item.paramGroup" v-for="(item,index) in props.eleInfo">
                            <div v-for="itme2 in item.paramDatas">
                                <span>{{ itme2.paramName }}：</span>
                                <span>{{ itme2.paramValue }}</span>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    eleInfo:{
        type: Array<any>,
        default: []
    }
})
const dialogVisible = ref(false)

watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal;
})

const emit = defineEmits(['closeDialog'])
const handleClose = () => {
    emit('closeDialog');
}

const activeNames = ref([1])

const handleChange = (val: any) => {
  console.log(val)
}

</script>

<style lang="scss" scoped>
.elemInfoDialog {
    :deep(.el-dialog) {
        width: vw(600);
        height: vh(600);
        background: rgba(0, 52, 71, 0.7);
        padding: 0;
        color: #fff;
        border: 1px solid #00E3FE;
        border-radius: vh(8);

        .el-dialog__header {
            padding: 0;

            .el-dialog__headerbtn {
                height: vh(44);
                width: vh(44);
            }

            .el-dialog__close {
                color: #00E3FE;
            }
        }
        .el-dialog__body {
            padding:0;
        }
        .dialog_content {
            .dialog_title {
                color: #fff;
                width: 100%;
                height: vh(44);
                font-size: vh(16);
                color: #FFFFFF;
                line-height: vh(44);
                border-bottom: 1px solid #00E3FE;
                padding-left: vh(18);
            }

            .dialog_body {
                padding: vh(18) vh(10) 0 vh(14);
                height: vh(556);
                overflow: scroll;
                .el-collapse {
                    border-top: none;
                    border-bottom: none;
                    .el-collapse-item__header {
                        background: rgba(0, 52, 71, 0.7);
                        background: transparent;
                        color: #fff;
                        border: none;
                        border-radius: 0;
                    }
                    .el-collapse-item__wrap {
                        // background: rgba(0, 52, 71, 0.7);
                        background: transparent;
                        color: #fff;
                        border: none;
                        .el-collapse-item__content {
                            color: #fff;
                            padding: 0 vh(20);
                        }
                    }
                }
            }
        }
    }
}
</style>
